<template>
	<view class="edit-box">
	  <view style="margin-top:64rpx;">给液档位</view>
	  <view class="choose-bar">
	    <view data-strength="1" @click="changeStrength(1)" :style="'background-color: ' + (itemCop.strength >= 1 ? ';': '')+ '#FFF3F1;'"></view>
	    <view data-strength="2"  @click="changeStrength(2)" :style="'background-color: ' + (itemCop.strength >= 2 ? ';': '') + '#FFF3F1;'"></view>
	    <view data-strength="3"  @click="changeStrength(3)" :style="'background-color: ' + (itemCop.strength >= 3 ? ';': '') + '#FFF3F1;'"></view>
	    <view  data-strength="4"  @click="changeStrength(4)" :style="'background-color: ' + (itemCop.strength >= 4 ? ';color:#FFF3F1;': '') + '#FFF3F1;'">
	      {{itemCop.strength}}档
	    </view>
	  </view>
	  <view style="margin-top:42rpx;">单次给液时间</view>
	  <view class="add-bar">
	    <view data-number="-0.1" @click="changeChoushuiSec(-0.1)">
	      <image src="/static/svg/mode-item-reduce.svg"></image>
	    </view>
	    <view>{{itemCop.choushui_sec}}s</view>
	    <view data-number="0.1" @click="changeChoushuiSec(0.1)">
	      <image src="/static/svg/mode-item-plus.svg"></image>
	    </view>
	  </view>
	  <view style="margin-top:48rpx;">间隔时间</view>
	  <view class="add-bar">
	    <view data-number="-0.1" @click="changeSleepSec(-0.1)">
	      <image src="/static/svg/mode-item-reduce.svg"></image>
	    </view>
	    <view>{{itemCop.sleep_sec}}s</view>
	    <view data-number="0.1" @click="changeSleepSec(0.1)">
	      <image src="/static/svg/mode-item-plus.svg"></image>
	    </view>
	  </view>
	  <view class="option-box f-between">
	    <view class="mask-cancel-btn f-center" @click="cancel">取消</view>
	    <view class="mask-confirm-btn f-center" @click="confirm">确定</view>
	  </view>
	</view>
</template>

<script>
	export default{
		props:['item'],
		data(){
			return{
				itemCop:{}
			}
		},
		created(){
			this.itemCop = JSON.parse(JSON.stringify(this.item))
		},
		methods: {
			setData(obj){
				for(let i of Object.keys(obj)){
					this[i] = obj[i]
				}
			},
			
		  changeStrength(strength){
		    this.setData({
		      itemCop:{
		        ...this.itemCop,
		        strength
		      }
		    })
		  },
		  changeChoushuiSec(number){
		    let item = this.itemCop
		    if(item.choushui_sec <= 0.1 && Number(number) < 0){
		      return
		    }
		    if(item.choushui_sec >= 2 && Number(number) > 0){
		      return
		    }
		    this.setData({
		      itemCop:{
		        ...item,
		        choushui_sec:(item.choushui_sec += Number(number)).toFixed(1) - 0
		      }
		    })
		  },
		  changeSleepSec(number){
		    let item = this.itemCop
		    if(item.sleep_sec <= 0.1 && Number(number) < 0){
		      return
		    }
		    if(item.sleep_sec >= 2 && Number(number) > 0){
		      return
		    }
		    this.setData({
		      itemCop:{
		        ...item,
		        sleep_sec:(item.sleep_sec += Number(number)).toFixed(1) - 0
		      }
		    })
		  },
		  cancel(){
		    this.$emit('itemcancel')
		  },
		  confirm(){
		    this.$emit('itemsave',this.itemCop)
		  }
		},
	}
</script>

<style>
	/* components/edit-mode-item/index.wxss */
	.edit-box{
	  width: 600rpx;
	  height: 720rpx;
	
	  display: flex;
	  flex-direction: column;
	  
	  align-items: center;
	
	  font-size: 28rpx;
	  color: #404040;
	  background: #fff;
	  border-radius: 36rpx;
	}
	
	.choose-bar{
	  width: 482rpx;
	  height: 60rpx;
	
	  border: 6rpx solid #FFF3F1FF; 
	  border-radius: 100rpx;
	  background-color: #FFF3F1FF;
	
	  display: flex;
	  margin-top: 16rpx;
	}
	.choose-bar >view{
	  width: 25%;
	  height: 100%;
	  background: #F5736EFF;
	}
	.choose-bar >view:not(:last-child){
	  border-right: 6rpx solid #FFF3F1FF;
	}
	.choose-bar >view:first-child{
	  border-radius: 100rpx 0 0 100rpx;
	}
	.choose-bar >view:last-child{
	  border-radius:  0 100rpx 100rpx 0 ;
	
	  display: flex;
	  justify-content: flex-end;
	  align-items: center;
	  padding-right: 20rpx;
	
	  font-size: 24rpx;
	  color: #f5736e;
	}
	
	.add-bar{
	  width: 482rpx;
	  height: 60rpx;
	
	  border: 6rpx solid #FFF3F1FF; 
	  border-radius: 100rpx;
	  background-color: #F5736E;
	
	  display: flex;
	
	  justify-content: space-between;
	  align-items: center;
	
	  color: #fff;
	  padding: 0 20rpx;
	  margin-top: 16rpx;
	}
	.add-bar >view:first-child image{
	  width: 24rpx;
	  height: 20rpx;
	}
	.add-bar >view:last-child image{
	  width: 24rpx;
	  height: 24rpx;
	}
	.option-box{
	  width: 100%;
	  margin-top: 100rpx;
	  padding: 0 100rpx;
	}
	.option-box >view{
	  width: 180rpx;
	  height: 80rpx;
	  font-size: 40rpx;
	}
</style>